<template>
  <child-page :getBackBtn="false">
    <div class="components-form-demo-advanced-search">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="网站标题" v-bind="formItemLayout">
          <a-input
            v-decorator="[
              'site_title',
              {
                initialValue: initInfo.site_title,
                rules: [{ required: true, message: '请输入网站标题！' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="网站logo" v-bind="formItemLayout">
          <div class="clearfix">
            <a-upload
              v-decorator="[
                'site_logo',
                {
                  initialValue: initInfo.logoUpload,
                  valuePropName: 'fileList',
                  getValueFromEvent: normFile,
                  rules: [{ required: true, message: '请上传logo' }]
                }
              ]"
              accept="image/*"
              listType="picture-card"
              name="file"
              :multiple="false"
              :showUploadList="false"
              :action="$api.upload"
              :data="postData"
              :beforeUpload="beforeUpload"
            >
              <img
                v-if="logoImage"
                :src="$api.picPre + logoImage"
                alt="avatar"
                style="width: 120px"
              />
              <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">上传logo</div>
              </div>
            </a-upload>
          </div>
        </a-form-item>
        <a-form-item label="联系电话" v-bind="formItemLayout">
          <a-input
            v-decorator="[
              'site_phone',
              {
                initialValue: initInfo.site_phone,
                rules: [{ required: true, message: '请输入联系电话！' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="联系地址" v-bind="formItemLayout">
          <a-input
            v-decorator="[
              'site_address',
              {
                initialValue: initInfo.site_address,
                rules: [{ required: true, message: '请输入联系地址！' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="网站备案号" v-bind="formItemLayout">
          <a-input
            v-decorator="[
              'site_record_no',
              {
                initialValue: initInfo.site_record_no,
                rules: [{ required: true, message: '请输入网站备案号！' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="投递邮箱" v-bind="formItemLayout">
          <a-input
            v-decorator="[
              'site_mail',
              {
                initialValue: initInfo.site_mail,
                rules: [{ required: true, message: '请输入投递邮箱！' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="邮政编号" v-bind="formItemLayout">
          <a-input
            v-decorator="[
              'postcode',
              {
                initialValue: initInfo.postcode,
                rules: [{ required: true, message: '请输入邮政编号！' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="传真电话" v-bind="formItemLayout">
          <a-input
            v-decorator="[
              'fax_no',
              {
                initialValue: initInfo.fax_no,
                rules: [{ required: true, message: '请输入传真电话！' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="工作时间" v-bind="formItemLayout">
          <a-input
            v-decorator="[
              'work_time',
              {
                initialValue: initInfo.work_time,
                rules: [{ required: true, message: '请输入工作时间！' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="微信二维码" v-bind="formItemLayout">
          <div class="clearfix">
            <a-upload
              v-decorator="[
                'wx_qr_code',
                {
                  initialValue: initInfo.wx_qr_upload,
                  valuePropName: 'fileList',
                  getValueFromEvent: weixinNormFile,
                  rules: [{ required: true, message: '请上传微信二维码' }]
                }
              ]"
              accept="image/*"
              listType="picture-card"
              name="file"
              :multiple="false"
              :showUploadList="false"
              :action="$api.upload"
              :data="postData"
              :beforeUpload="weixinQRUpload"
            >
              <img
                v-if="weixinImage"
                :src="$api.picPre + weixinImage"
                alt="avatar"
                style="width: 120px"
              />
              <div v-else>
                <a-icon :type="weixinLoading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">微信二维码</div>
              </div>
            </a-upload>
          </div>
        </a-form-item>
        <a-form-item label="微博二维码" v-bind="formItemLayout">
          <div class="clearfix">
            <a-upload
              v-decorator="[
                'wb_qr_code',
                {
                  initialValue: initInfo.wb_qr_upload,
                  valuePropName: 'fileList',
                  getValueFromEvent: weiboNormFile,
                  rules: [{ required: true, message: '请上传微博二维码' }]
                }
              ]"
              accept="image/*"
              listType="picture-card"
              name="file"
              :multiple="false"
              :showUploadList="false"
              :action="$api.upload"
              :data="postData"
              :beforeUpload="weiboQRUpload"
            >
              <img
                v-if="weiboImage"
                :src="$api.picPre + weiboImage"
                alt="avatar"
                style="width: 120px"
              />
              <div v-else>
                <a-icon :type="weiboLoading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">微博二维码</div>
              </div>
            </a-upload>
          </div>
        </a-form-item>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'center' }">
            <a-button type="primary" html-type="submit">
              提交
            </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
              重置
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </child-page>
</template>

<script>
import childPage from "@/components/childPageContent/index";
import { getToken } from "@/tool/qiniu";
export default {
  name: "index",
  components: {
    childPage
  },
  data() {
    return {
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      initInfo: {},
      postData: {
        token: ""
      },
      loading: false,
      logoImage: "",
      weixinLoading: false,
      weixinImage: "",
      weiboLoading: false,
      weiboImage: ""
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let obj = JSON.parse(JSON.stringify(values));
          if (values.site_logo) {
            obj.site_logo = values.site_logo[0].response.key;
          }
          if (values.wx_qr_code) {
            obj.wx_qr_code = values.wx_qr_code[0].response.key;
          }
          if (values.wb_qr_code) {
            obj.wb_qr_code = values.wb_qr_code[0].response.key;
          }
          this.$ajax
            .post(this.$api.editConfigInfo, obj)
            .then(() => {
              this.$notification.success({
                message: "操作成功"
              });
              this.getInfo();
            })
            .catch(err => {
              this.$notification.error({
                message: err
              });
            });
        }
      });
    },
    handleReset() {
      this.form.resetFields();
    },
    normFile(e) {
      if (e.file.status === "uploading") {
        this.loading = true;
        return e && e.fileList;
      } else if (e.file.status === "done") {
        this.logoImage = e.file.response.key;
        this.loading = false;
        if (e.fileList.length > 1) {
          e.fileList.splice(0, 1);
        }
      }
      return e && e.fileList;
    },
    beforeUpload(file) {
      let timestamp2 = new Date().getTime();
      let typeArr = file.name.split(".");
      let type = typeArr[typeArr.length - 1];
      let savekey = "cxxy/logo/" + timestamp2 + "." + type;
      this.postData.token = getToken(savekey);
      let _this = this;
      let imgWidth = "";
      let imgHight = "";
      const isSize = new Promise(function(resolve, reject) {
        let width = 124;
        let height = 98;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          imgWidth = img.width;
          imgHight = img.height;
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          _this.$notification.error({
            message:
              "图片大小不符合标准,宽高为124px*98px。当前上传图片的宽高分别为：" +
              imgWidth +
              "px和" +
              imgHight +
              "px"
          });
          return Promise.reject();
        }
      );
      return isSize;
    },
    weixinNormFile(e) {
      if (e.file.status === "uploading") {
        this.weixinLoading = true;
        return e && e.fileList;
      } else if (e.file.status === "done") {
        this.weixinImage = e.file.response.key;
        this.weixinLoading = false;
        if (e.fileList.length > 1) {
          e.fileList.splice(0, 1);
        }
      }
      return e && e.fileList;
    },
    weixinQRUpload(file) {
      let timestamp2 = new Date().getTime();
      let typeArr = file.name.split(".");
      let type = typeArr[typeArr.length - 1];
      let savekey = "cxxy/weixinQR/" + timestamp2 + "." + type;
      this.postData.token = getToken(savekey);
      let _this = this;
      let imgWidth = "";
      let imgHight = "";
      const isSize = new Promise(function(resolve, reject) {
        let width = 124;
        let height = 98;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          imgWidth = img.width;
          imgHight = img.height;
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          _this.$notification.error({
            message:
              "图片大小不符合标准,宽高为694px*393px。当前上传图片的宽高分别为：" +
              imgWidth +
              "px和" +
              imgHight +
              "px"
          });
          return Promise.reject();
        }
      );
      return isSize;
    },
    weiboNormFile(e) {
      if (e.file.status === "uploading") {
        this.weiboLoading = true;
        return e && e.fileList;
      } else if (e.file.status === "done") {
        this.weiboImage = e.file.response.key;
        this.weiboLoading = false;
        if (e.fileList.length > 1) {
          e.fileList.splice(0, 1);
        }
      }
      return e && e.fileList;
    },
    weiboQRUpload(file) {
      let timestamp2 = new Date().getTime();
      let typeArr = file.name.split(".");
      let type = typeArr[typeArr.length - 1];
      let savekey = "cxxy/weiboQR/" + timestamp2 + "." + type;
      this.postData.token = getToken(savekey);
      let _this = this;
      let imgWidth = "";
      let imgHight = "";
      const isSize = new Promise(function(resolve, reject) {
        let width = 124;
        let height = 98;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          imgWidth = img.width;
          imgHight = img.height;
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          _this.$notification.error({
            message:
              "图片大小不符合标准,宽高为694px*393px。当前上传图片的宽高分别为：" +
              imgWidth +
              "px和" +
              imgHight +
              "px"
          });
          return Promise.reject();
        }
      );
      return isSize;
    },
    getInfo() {
      this.$ajax
        .get(this.$api.getConfigInfo)
        .then(res => {
          this.initInfo = res;
          this.initInfo.logoUpload = [
            {
              uid: "1",
              status: "done",
              url: this.$api.picPre + res.site_logo,
              name: res.site_title,
              response: {
                key: res.site_logo
              }
            }
          ];
          this.logoImage = res.site_logo;
          this.initInfo.wx_qr_upload = [
            {
              uid: "1",
              status: "done",
              url: this.$api.picPre + res.wx_qr_code,
              name: res.site_title,
              response: {
                key: res.wx_qr_code
              }
            }
          ];
          this.weixinImage = res.wx_qr_code;
          this.initInfo.wb_qr_upload = [
            {
              uid: "1",
              status: "done",
              url: this.$api.picPre + res.wb_qr_code,
              name: res.site_title,
              response: {
                key: res.wb_qr_code
              }
            }
          ];
          this.weiboImage = res.wb_qr_code;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="less"></style>
